<template>
<div>
    <i-form ref='myForm' :dataForm='dataForm'></i-form>
    <lib-doc :libDocData="libDocData"></lib-doc>
</div>
</template>

<script lang="ts">
import { defineComponent, reactive, ref } from 'vue'
import { IForm } from 'wd-platform-library'
import LibDoc from '@/components/LibDoc.vue'
import { LibDocInterface } from '@/service/LibDocService'
import { FormInterFace, FormDataInterFace } from 'wd-platform-library/lib/src/IForm/src/IFormInterFace'
interface DataFormInterFace {
    radio:string;
    checkbox:string[];
}
export default defineComponent({
    name: 'i_from_demo',
    setup () {
        const myForm = ref()
        const dataForm: FormInterFace<DataFormInterFace> = reactive({
            labelWidth: 80, // 文本宽度
            form: {
                radio: '21',
                checkbox: ['bj', 'hn']
            },
            fieldDataList: [
                {
                    type: 'radio', // form表单类型
                    label: '单选', // 字段描述信息
                    field: 'radio', // form 对应字段
                    dataList: [
                        {
                            label: '21',
                            value: '21'
                        },
                        {
                            label: '20',
                            value: '20'
                        },
                        {
                            label: '19',
                            value: '19'
                        }
                    ],
                    rules: [
                        {
                            required: true,
                            message: '请选择年龄',
                            trigger: 'blur'
                        }
                    ]
                },
                {
                    type: 'checkbox', // form表单类型
                    label: '复选框', // 字段描述信息
                    field: 'checkbox', // form 对应字段
                    dataList: [
                        {
                            label: '北京',
                            value: 'bj'
                        },
                        {
                            label: '河北',
                            value: 'hb'
                        },
                        {
                            label: '河南',
                            value: 'hn'
                        }
                    ],
                    rules: [
                        {
                            required: true,
                            message: '请选择复选框',
                            trigger: 'change',
                            type: 'array'
                        }
                    ]
                }
            ]
        })
        const libDocData: LibDocInterface = {
            title: '代码示例',
            docList: [
                {
                    label: '引入组件',
                    type: 'pre',
                    value: `
        import { IForm } from 'wd-platform-library'
        <i-form ref='myForm' :dataForm='dataForm'> </i-form> `
                },
                {
                    label: '创建表单对象',
                    type: 'pre',
                    value: `
        const dataForm: FormInterFace<DataFormInterFace> = reactive({
            labelWidth:80, // 文本宽度
            form: {
                radio: '21',
                checkbox: ['bj', 'hn']
            },
            fieldDataList: [
                {
                    type: 'radio', // form表单类型
                    label: '单选', // 字段描述信息
                    field: 'radio', // form 对应字段
                    dataList: [
                        {
                            label: '21',
                            value: '21'
                        },
                        {
                            label: '20',
                            value: '20'
                        },
                        {
                            label: '19',
                            value: '19'
                        }
                    ],
                    rules: [
                        {
                            required: true,
                            message: '请选择年龄',
                            trigger: 'blur'
                        }
                    ]
                },
                {
                    type: 'checkbox', // form表单类型
                    label: '复选框', // 字段描述信息
                    field: 'checkbox', // form 对应字段
                    dataList: [
                        {
                            label: '北京',
                            value: 'bj'
                        },
                        {
                            label: '河北',
                            value: 'hb'
                        },
                        {
                            label: '河南',
                            value: 'hn'
                        }
                    ]
                }
            ]
        }) `
                }

            ]
        }
        return {
            libDocData,
            myForm,
            dataForm
        }
    },
    methods: {
    },
    components: {
        IForm,
        LibDoc
    }
})
</script>

<style lang="scss" scoped>
.cus_template{
    display: flex;
}
</style>
